<template>
  <div class="Mine">
    <div class="main">
      <div class="main_content">
          <div class="main_left">
              <h4 class="h4">我的歌手（4）</h4>
              <h4 class="h41">创建的歌单（1）</h4>
              <div class="cj">新建</div>
              <div class="like">
                  <p>喜欢的音乐</p>
                  <span>86首</span>
              </div>
          </div>
          <div class="main_right">
            <div class="rightTop">
              <div class="Img">
                <img src="https://p1.music.126.net/wC4KLJVCRr3-ZL7HnK2h9g==/109951165446378446.jpg?param=200y200" alt="">
              </div>
              <div class="right_right">
                <div class="first">
                  <img src="@/assets/img/img1.png">
                  <span>我喜欢的音乐</span>
                </div>
                <p class="p1">2021年5月20日创建</p>
                <img src="@/assets/img/img.png" class="img">
              </div>
            </div>
            <div class="title">
              <p>歌曲列表</p>
              
            </div>
            <div class="bottom">
              <div class="nav">
                <span class="kong"></span>
                <span class="singTitle">歌曲标题</span>
                <span class="time">时长</span>
                <span class="singers">歌手</span>
                <span class="zjs">专辑</span>
              </div>
              <div class="nav_content">
                <div class="content" v-for="(item,index) in arrs" :key="index">
                  <span class="kong">{{item.id}}</span>
                  <span class="singTitle">{{item.name}}</span>
                  <span class="time">{{item.time}}</span>
                  <span class="singers">{{item.singer}}</span>
                  <span class="zjs">{{item.zj}}</span>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: "Mine",
  data(){
    return{
      arrs:{},
      // arrs1:{}
    }
  },
  components:{},
  methods:{
    async fn(){
      let {data} = await axios.get("http://localhost:3000/main")
        this.arrs = data
        // this.arrs1=data.main;
        console.log(this.arrs)
    }
  },
  created(){
    this.fn()
  }
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.main {
  width: 100%;
  height: 100%;
}
.main_content {
  width: 980px;
  height: 100%;
  /* background: black; */
  margin: 0 auto;
}
.main_left{
    width:240px;
    height:940px;
    border:1px solid #eee;
    border-top:0;
    overflow: hidden;
    float:left;
}
.h4{
    margin-top:30px;
}
.h41{
    margin:20px 0 0 25px;
    float:left;
}
.cj{
    width:52px;
    height:22px;
    border:1px solid #eee;
    float:left;
    margin:20px 0 0 20px;
}
.like{
    width:240px;
    height:54px;
    background: #eee;
    margin-top:50px;
    overflow: hidden;
}
.like p{
    margin-top:7px;
    color:black;
}
.like span{
    display: inline-block;
    margin-top:5px;
    font-size:14px;
}
.main_right{
  width:737px;
  height:940px;
  border-right:1px solid #eee;
  border-bottom:1px solid #eee;
  float:left;
}
.rightTop{
  width:737px;
  height:280px;
  /* background: red; */
}
.Img{
  width:204px;
  height:204px;
  float:left;
  margin:44px 0 0 44px;
  border:1px solid #eee;
  /* overflow: hidden; */
}
.Img img{
  margin:2px auto;
  width:200px;
  height:200px;

}
.right_right{
  width:430px;
  height:122px;
  /* background: lemonchiffon; */
  float:left;
  margin:44px 0 0 40px;
}
.first{
  width:400px;
  height:35px;
  /* background: red; */
}
.first img{
  float:left;
  margin-top:5px;
}
.first span{
  float:left;
  display: block;
  margin:10px 0 0 10px;
}
.p1{
  float:left;
  margin:10px 0 0 0;
}
.img{
  margin:10px 0 0 -67px;
}
.title{
  width:740px;
  height:50px;
  border-bottom:2px solid red;
  /* overflow: hidden; */
}
.title p{
  line-height: 50px;
  float:left;
  margin-left:42px;
  font-size:22px;
}
.bottom{
  width:740px;
  height:400px;
  /* background: red; */
}
.nav{
  width:740px;
  height:40px;
  border-bottom:1px solid #eee;
  background: #ddd;
}
.nav span{
  float:left;
  height:40px;
  border-right:1px solid #eee;
  line-height: 40px;
}
.kong{
  width:70px;
}
.singTitle{
  width:356px;
}
.time{
  width:111px;
}
.singers{
  width:100px;
}
.zjs{
  width:98px;
  border-right: none;
}
.nav_content{
  width:740px;
  height:500px;
  /* background: black; */
}
.content{
  width:740px;
  height:40px;
  line-height: 40px;
  /* background: cornsilk; */
}
.content span{
  float:left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>